<template>
  <div class="map-window" v-if="visible">
    <div class="header">
      <i class="el-icon-circle-close" @click="hide"></i>
    </div>
    <Video :camera-url="this.url" v-if="this.url"></Video>
  </div>
</template>
<script>
import Video from "@/components/Video";
export default {
  name: "Carousel",
  components: {
    Video,
  },

  data() {
    return {
      visible: false,
      url: "",
    };
  },
  mounted() {
    // this.imgLoad();
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     this.imgLoad();
    //   },
    //   false
    // );
  },
  methods: {
    // onLoad(e) {
    //   const img = e.target;
    //   let width = 0;
    //   if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
    //     width = img.width + 10;
    //   }
    //   this.imgwidth = width + "px";
    // },
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
};
</script>
<style>
.map-window {
  width: 600px;
  height: 400px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.header {
  display: flex;
  justify-content: flex-end;
  font-size: 25px;
  color: white;
}
.el-icon-circle-close {
  color: red;
  cursor: pointer;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
